<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less">
    <link rel="stylesheet/less" href="./less/addressManagement.less">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">确认订单</div>
                    <div @click="addAddress">
                        <img src="./img/add.png"/>
                    </div>
                    <div @click="spellDeals">
                        <img src="./img/arrow_back.png"/>
                    </div>    
                </header>
            </div>
            <div class="scroll">
                <div class="message">
                    <ul v-for="(item,index) in address" @click="addressSwitch(item)">
                        <li>
                            <ul>
                                <li>{{item.person}}</li>
                                <li>
                                    <ul>
                                        <li>{{item.phone}}</li>
                                        <li>{{item.area}}{{item.address}}</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <img src="./img/arrow_right.png"/>
                        </li>
                    </ul>
                </div>
            </div> 
        </div>
    </div>
</body>
</html>
<script type="module">
    import { shoppingAddressList } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            address:[],
            person: '',
            phone: '',
            area: '',
            addressStatus: null,
            addressManagementStatus: true
        },
        mounted(){
            let that = this;
                that.orderInformation();
                that.public.shareLink();
        },
        methods:{

            orderInformation(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                    that.goodsImage = query.goodsImage;
                    that.goodsName = query.goodsName;
                    that.buyingPrice = query.buyingPrice;
                    that.spec = query.spec;

                    
                let userData = JSON.parse(localStorage.getItem("userData"));

                shoppingAddressList({
                    userId: userData.userId
                }).then(res=>{
                    that.address = res.data.shoppingAddressList;
                }).catch(error=>{
                    console.log(error);
                })
            },

            addressSwitch(data){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                if(query.type == 0){
                    if(data.status == 0){
                        that.addressStatus = true;
                    }else if(data.status == 1){
                        that.addressStatus = false;
                    }

                    let url = "./order.html?person="+data.person+"&phone="+data.phone+"&area="+data.area+data.address+"&addressStatus="+that.addressStatus+"&goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+query.teamId+"&addressManagementStatus="+that.addressManagementStatus;
                        window.location.href = url;
                }
                
            },

            spellDeals(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                let url;
                if(query.type == 0){
                    url = "./order.html?goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+query.teamId;
                }else if(query.type == 1){
                    url = "./mine.html";
                }
                window.location.href = url;
            },
            addAddress(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                let url;
                if(query.type == 0){
                    url = "./shippingAddress.html?goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+query.teamId+"&addressManagementStatus="+that.addressManagementStatus+"&type="+query.type;
                }else if(query.type == 1){
                    url = "./shippingAddress.html?&type="+query.type;
                }
                
                window.location.href = url;
            },
        }
    })    
</script>